<template>
    <div class="question-card">
        <div class="question-header">
            <div class="question-number">
                第 {{ questionNumber }} 题
            </div>
            <div class="question-category" v-if="question.category">
                {{ getCategoryName(question.category) }}
            </div>
        </div>

        <div class="question-content">
            <h3 class="question-title">{{ question.question_text }}</h3>
            <p v-if="question.description" class="question-description">
                {{ question.description }}
            </p>
        </div>

        <!-- 多选题 -->
        <div v-if="question.question_type === 'multiple_choice'" class="answer-options">
            <van-radio-group v-model="selectedAnswer" @change="handleAnswerChange">
                <div v-for="(option, index) in question.options" :key="index" class="option-item">
                    <van-radio :name="option.value" :disabled="answered">
                        {{ option.label }}
                    </van-radio>
                </div>
            </van-radio-group>
        </div>

        <!-- 评分题 -->
        <div v-else-if="question.question_type === 'rating'" class="rating-section">
            <div class="rating-labels">
                <span class="rating-label">{{ question.rating_min_label || '完全不符合' }}</span>
                <span class="rating-label">{{ question.rating_max_label || '完全符合' }}</span>
            </div>
            <div class="rating-options">
                <van-radio-group v-model="selectedAnswer" direction="horizontal" @change="handleAnswerChange">
                    <van-radio v-for="i in (question.rating_max || 5)" :key="i" :name="i" :disabled="answered">
                        {{ i }}
                    </van-radio>
                </van-radio-group>
            </div>
        </div>

        <!-- 文本题 -->
        <div v-else-if="question.question_type === 'text'" class="text-section">
            <van-field v-model="textAnswer" type="textarea" placeholder="请输入您的答案..." rows="4" maxlength="500"
                show-word-limit :disabled="answered" @blur="handleTextAnswer" />
        </div>

        <!-- 情景题 -->
        <div v-else-if="question.question_type === 'scenario'" class="scenario-section">
            <div class="scenario-content">
                <div class="scenario-background">
                    <h4>情景描述</h4>
                    <p>{{ question.scenario_description }}</p>
                </div>
                <div class="scenario-question">
                    <h4>在这种情况下，您会如何处理？</h4>
                </div>
            </div>
            <div class="scenario-options">
                <van-radio-group v-model="selectedAnswer" @change="handleAnswerChange">
                    <div v-for="(option, index) in question.options" :key="index" class="scenario-option">
                        <van-radio :name="option.value" :disabled="answered">
                            <div class="option-content">
                                <div class="option-title">{{ option.label }}</div>
                                <div v-if="option.description" class="option-description">
                                    {{ option.description }}
                                </div>
                            </div>
                        </van-radio>
                    </div>
                </van-radio-group>
            </div>
        </div>

        <!-- 操作按钮 -->
        <div class="question-actions">
            <van-button type="primary" size="large" block :disabled="!hasAnswer" @click="submitAnswer">
                {{ isLastQuestion ? '完成评估' : '下一题' }}
            </van-button>
        </div>

        <!-- 答题提示 -->
        <div v-if="question.hint" class="question-hint">
            <van-icon name="info-o" />
            <span>{{ question.hint }}</span>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import type { AssessmentQuestion } from '@/api'

interface Props {
    question: AssessmentQuestion
    questionNumber: number
    totalQuestions: number
}

interface Emits {
    (e: 'answer', answer: { value: any; text?: string }): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

// 响应式数据
const selectedAnswer = ref<any>(null)
const textAnswer = ref('')
const answered = ref(false)

// 计算属性
const hasAnswer = computed(() => {
    if (props.question.question_type === 'text') {
        return textAnswer.value.trim().length > 0
    }
    return selectedAnswer.value !== null
})

const isLastQuestion = computed(() => {
    return props.questionNumber === props.totalQuestions
})

// 方法
const getCategoryName = (category: string) => {
    const categoryMap: Record<string, string> = {
        'communication': '沟通表达',
        'empathy': '共情理解',
        'conflict_resolution': '冲突处理',
        'leadership': '领导力',
        'teamwork': '团队协作',
        'emotional_intelligence': '情商',
        'social_awareness': '社交意识',
        'adaptability': '适应性'
    }
    return categoryMap[category] || category
}

const handleAnswerChange = () => {
    // 自动提交选择题答案
    if (props.question.question_type !== 'text') {
        setTimeout(() => {
            submitAnswer()
        }, 300)
    }
}

const handleTextAnswer = () => {
    // 文本题失焦时不自动提交，需要用户点击按钮
}

const submitAnswer = () => {
    if (!hasAnswer.value || answered.value) return

    answered.value = true

    const answer = {
        value: props.question.question_type === 'text' ? textAnswer.value : selectedAnswer.value,
        text: props.question.question_type === 'text' ? textAnswer.value : undefined
    }

    emit('answer', answer)
}

// 监听题目变化，重置状态
watch(() => props.question.id, () => {
    selectedAnswer.value = null
    textAnswer.value = ''
    answered.value = false
}, { immediate: true })
</script>

<style lang="scss" scoped>
.question-card {
    background: white;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 16px;

    .question-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;

        .question-number {
            font-size: 14px;
            color: #1989fa;
            font-weight: 500;
        }

        .question-category {
            font-size: 12px;
            color: #646566;
            background: #f7f8fa;
            padding: 4px 8px;
            border-radius: 4px;
        }
    }

    .question-content {
        margin-bottom: 24px;

        .question-title {
            font-size: 18px;
            color: #323233;
            line-height: 1.5;
            margin: 0 0 12px 0;
            font-weight: 500;
        }

        .question-description {
            font-size: 14px;
            color: #646566;
            line-height: 1.6;
            margin: 0;
        }
    }

    .answer-options {
        margin-bottom: 24px;

        .option-item {
            margin-bottom: 12px;

            &:last-child {
                margin-bottom: 0;
            }

            :deep(.van-radio) {
                width: 100%;
                padding: 16px;
                border: 1px solid #ebedf0;
                border-radius: 8px;
                margin: 0;

                &.van-radio--checked {
                    border-color: #1989fa;
                    background: #f0f8ff;
                }

                .van-radio__label {
                    color: #323233;
                    font-size: 16px;
                    line-height: 1.5;
                }
            }
        }
    }

    .rating-section {
        margin-bottom: 24px;

        .rating-labels {
            display: flex;
            justify-content: space-between;
            margin-bottom: 16px;

            .rating-label {
                font-size: 14px;
                color: #646566;
            }
        }

        .rating-options {
            :deep(.van-radio-group) {
                display: flex;
                justify-content: space-between;
                gap: 8px;

                .van-radio {
                    flex: 1;
                    text-align: center;
                    padding: 12px 8px;
                    border: 1px solid #ebedf0;
                    border-radius: 8px;
                    margin: 0;

                    &.van-radio--checked {
                        border-color: #1989fa;
                        background: #1989fa;
                        color: white;

                        .van-radio__label {
                            color: white;
                        }
                    }

                    .van-radio__icon {
                        display: none;
                    }

                    .van-radio__label {
                        color: #323233;
                        font-size: 16px;
                        font-weight: 500;
                    }
                }
            }
        }
    }

    .text-section {
        margin-bottom: 24px;

        :deep(.van-field) {
            border: 1px solid #ebedf0;
            border-radius: 8px;
            padding: 16px;

            .van-field__control {
                font-size: 16px;
                line-height: 1.5;
            }
        }
    }

    .scenario-section {
        margin-bottom: 24px;

        .scenario-content {
            margin-bottom: 20px;

            .scenario-background {
                background: #f7f8fa;
                padding: 16px;
                border-radius: 8px;
                margin-bottom: 16px;

                h4 {
                    font-size: 16px;
                    color: #323233;
                    margin: 0 0 8px 0;
                    font-weight: 500;
                }

                p {
                    font-size: 14px;
                    color: #646566;
                    line-height: 1.6;
                    margin: 0;
                }
            }

            .scenario-question {
                h4 {
                    font-size: 16px;
                    color: #323233;
                    margin: 0;
                    font-weight: 500;
                }
            }
        }

        .scenario-options {
            .scenario-option {
                margin-bottom: 12px;

                &:last-child {
                    margin-bottom: 0;
                }

                :deep(.van-radio) {
                    width: 100%;
                    padding: 16px;
                    border: 1px solid #ebedf0;
                    border-radius: 8px;
                    margin: 0;

                    &.van-radio--checked {
                        border-color: #1989fa;
                        background: #f0f8ff;
                    }

                    .van-radio__label {
                        width: 100%;
                    }
                }

                .option-content {
                    .option-title {
                        font-size: 16px;
                        color: #323233;
                        font-weight: 500;
                        margin-bottom: 4px;
                    }

                    .option-description {
                        font-size: 14px;
                        color: #646566;
                        line-height: 1.5;
                    }
                }
            }
        }
    }

    .question-actions {
        margin-bottom: 16px;
    }

    .question-hint {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        padding: 12px 16px;
        background: #fff7e6;
        border: 1px solid #ffd21e;
        border-radius: 8px;
        font-size: 14px;
        color: #ed6a0c;

        .van-icon {
            margin-top: 2px;
            flex-shrink: 0;
        }
    }
}
</style>